<template>
	<view class="follow_store">
		<view class="item" v-for="(item,index) in list" :key="index">
			<image :src="item.image" class="avatar"></image>
			<view class="name line1">{{item.name}}</view>
			<view class="btn" @click="unfollow(item,index)">取关</view>
		</view>
		
		<view v-if="!list.length">
			<emptyPage title="暂未关注～"></emptyPage>
		</view>
	</view>
</template>

<script>
	import {
		getCollectUserList,
		collectDel
	} from '@/api/new_store.js';
	
	import emptyPage from '@/components/emptyPage.vue';

	export default {
		components: {
			emptyPage
		},
		data() {
			return {
				page: 1,
				limit: 20,
				count: 19,
				list: []
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			let total = Math.ceil(this.count / this.limit);
			if (this.page >= total) return;
			this.page++;
			this.getList();
		},
		methods: {
			getList() {
				getCollectUserList({
					page: this.page,
					limit: 20,
					category: "store"
				}).then(res => {
					let list = res.data.list;
					this.list = this.page == 1 ? list : [...list, ...this.list];
					this.count = res.data.count;
				})
			},
			unfollow(item, index) {
				let store_id = item.id;
				collectDel(store_id, "store").then(res => {
					this.list.splice(index, 1);
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	.follow_store {
		padding: 20rpx 28rpx;
		box-sizing: border-box;

		.item {
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			margin-bottom: 20rpx;
			padding: 16rpx 24rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.avatar {
				width: 104rpx;
				height: 104rpx;
				border-radius: 50%;
			}

			.name {
				flex: 1;
				font-size: 30rpx;
				color: #333333;
				padding: 0 16rpx;
				box-sizing: border-box;
			}

			.btn {
				width: 128rpx;
				height: 52rpx;
				line-height: 52rpx;
				text-align: center;
				background: rgba(255, 129, 51, .2);
				font-size: 24rpx;
				color: #FF8133;
				border-radius: 26rpx 26rpx 26rpx 26rpx;
			}
		}
	}
</style>